<template>
  <div class="order">
      <header class="order_header">
        <BaseNavBar title="订单列表" isNav/>
      </header>
      <main style="background-color: #fff; margin-top: 8px;">
      <van-swipe-cell v-for="item in dataSource" :key="item?.id">
          <Card>
              <p class="order_no">订单编号：{{ item?.orderNo }}</p>
              <p class="order_name">店铺名：{{ item?.merchantName }}</p>
              <p class="order_num">菜品数量：{{ `x ${item?.totalQty}` }}</p>
              <p class="order_price">总价格：{{ `¥ ${item?.totalAmount}` }}</p>
              <p class="order_time">创建时间：{{ item?.createTime }}</p>
              <p class="order_status">状态：
                <van-tag plain type="primary" v-if="item?.status === 1">待支付</van-tag>
                <van-tag plain type="success" v-if="item?.status === 2">已完成</van-tag>
                <van-tag plain type="danger" v-if="item?.status === 3">已取消</van-tag>
              </p>
              <section class="order-action">
                    <van-space>
                        <van-button type="primary" class="#FF6B81" round size="mini" v-if="item?.status === 1" @click="handlePay(item)">支付订单</van-button>
                        <van-button type="warning"  round size="mini" v-if="item?.status === 1" @click="handleCancel(item)">取消订单</van-button>
                        <van-button  type="primary" round plain color="#FF6B81" size="mini" @click="handleNavigate(item)">订单详情</van-button>
                    </van-space>
              </section>
          </Card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="handleDelete(item)" />
        </template>
      </van-swipe-cell>
    </main>
    <van-empty description="暂无订单"  v-if="!dataSource?.length"/>
    <footer class="order_footer">
      <van-pagination v-model="currentPage" :total-items="total" :items-per-page="10" @change="onPageChange"  v-if="dataSource.length > 10" />
    </footer>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import { useRouter,useRoute } from 'vue-router';
import {showToast,showConfirmDialog} from 'vant';
import  BaseNavBar from '@/components/BaseNavBar/index.vue';
import {getOrderList,deleteOrder,editOrder} from '@/apis/order';

const router = useRouter();
const route = useRoute();
const total = ref(0);
const currentPage = ref(1);

const dataSource = ref([]);

const init = async () => {
  try {
      if(route.params?.id  == '-1'){
        const {data={}} = await getOrderList();
        dataSource.value = data?.list || [];
        return;
      }
      const {data={}} = await getOrderList({
        status:route.params?.id
      });
      dataSource.value = data?.list || [];
  } catch (error) {
    console.log(error, 'error');

  }
};
const onPageChange = async (current) => {
  try {
    const { data = {} } = await getOrderList({
      pageNum: current,
      pageSize: 10,
    });
    dataSource.value = data?.list || [];

    total.value = data?.total || 0;

  } catch (error) {
    console.log(error, 'error');

  }
}

const handlePay = (item) => {
  showConfirmDialog({
    title: `确定要支付此订单吗？`,
  })
    .then(async() => {
      try {
        const {code,msg} = await editOrder({
          id:item?.id,
          status:2
        });
        if(code === 200){
          showToast(`已成功支付${item?.totalAmount}元`);
          init();
          return;
        }
        showToast(msg);

      } catch (error) {
        console.log(error,'error');
      }
    })
    .catch(() => {

    });
};

const handleCancel = (item) => {
  showConfirmDialog({
    title: `确定要取消此订单吗？`,
  })
    .then(async() => {
      try {
        const {code,msg} = await editOrder({
          id:item?.id,
          status:3
        });
        if(code === 200){
          showToast(`已成功取消订单`);
          init();
          return;
        }
        showToast(msg);

      } catch (error) {
        console.log(error,'error');
      }
    })
    .catch(() => {

    });
}

const handleDelete = (item) => {
  showConfirmDialog({
    title: `确定要删除此订单吗？`,
  })
    .then(async() => {
      try {
        const {code,msg} = await deleteOrder(item?.id);
        if(code === 200){
          showToast('删除订单成功');
          init();
          return;
        }
        showToast(msg);

      } catch (error) {
        console.log(error,'error');
      }
    })
    .catch(() => {

    });
};

const handleNavigate = (item) => {
  router.push(`/order/detail/${item?.id}`);
};


onMounted(() => {
  init();
});
</script>

<style lang="less" scoped>
.order {
  &_no{
    font-size: 14px;
    color: #333;
  }
  &_name{
    margin-top: 4px;
    font-size: 14px;
    color: #000;
    font-weight: bold;
  }
  &_num{
    margin-top: 4px;
    font-size: 12px;
    color: #666;
  }
  &_price{
    margin-top: 4px;
    font-size: 14px;
    color: #f50;
  }
  &_time{
    margin-top: 4px;
    font-size: 12px;
    color: #999;
  }
  &_status{
    margin-top: 4px;
    font-size: 12px;
    color: #333;
  }
  &_footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
  }
  &-action{
    margin-top: 4px;
    display: flex;
    justify-content: end;
    align-items: center;
  }
}
.delete-button {
    height: 100%;
  }
</style>
